<template>
  <div class="config-box flex-column">
    <span class="config-label">图片属性</span>
    <div class="config-main flex-column">
      <upload-image class="config-item" v-model="formItem['configH5']['imageUrl']" icon-name="sfz-fm">
      </upload-image>
      <el-button v-if="formItem.config.isDragResize" type="primary" size="small" class="config-item" @click="delItem">删除组件</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConfigDPic',
  components: {
    'upload-image': () => import('@/views/components/uploadImage/index')
  },
  props: {
    value: {
      type: Object,
      default: {}
    }
  },
  watch: {
    value: {
      handler: function(obj){
        this.formItem = obj
      },
      deep: true,
      immediate: true
    }
  },
  data(){
    return {
      formItem: this.value || {},
    }
  },
  methods: {
    delItem(){
      this.$emit('delItem')
    }
  }
} 
</script>

<style scoped lang="scss">
.config-box{
  padding-right: 10px;
  .config-label{
    font-size: 13px;
    color: #3E3E3E;
    margin-bottom: 15px;
  }
  .config-item{
    margin-bottom: 15px;
  }
}
</style>
